<template>
  <div>
    <el-container>
      <el-main class="test">
        <el-row>
          <h3>用户名</h3>
          <el-input
              placeholder="请输入内容"
              v-model="userName"
              clearable>
          </el-input>
        </el-row>
        <el-row>
          <h3>密码</h3>
          <el-input placeholder="请输入密码" v-model="userPwd" show-password></el-input>
        </el-row>
        <br/>
        <el-button style="width: 150px;margin-left: 33%;" type="primary" v-on:click="login" v-on:keyup.enter="login">
          登录
        </el-button>
      </el-main>
    </el-container>

  </div>
</template>
<script>
import axios from "axios";

export default {
  methods: {
    login() {
      const that = this
      let data = JSON.stringify({
        "userName": this.userName,
        "userPwd": this.userPwd
      });

      let config = {
        method: 'post',
        url: 'http://localhost:8080/user/login',
        headers: {
          'Content-Type': 'application/json'
        },
        data: data
      };

      axios(config)
          .then(function (response) {
            if (response.data.code == 0) {
              sessionStorage.setItem("token", response.data.data)
              that.$router.push('/index');
            } else {
              alert("登陆失败")
            }
            console.log(JSON.stringify(response.data));
          })
          .catch(function (error) {
            console.log(error);
          });
    },

  },
  data() {
    return {
      userName: '',
      userPwd: '',
    }
  },
}
</script>

<style>
.test {
  margin-left: 33%;
  margin-right: 33%;
  margin-top: 10%;
}
</style>